<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>jQuery UI Statusbar - Default demo</title>
        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/cupertino/jquery-ui.css" rel="Stylesheet" />
        <link type="text/css" href="../src/css/jquery.ui.statusbar.css" rel="Stylesheet" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="../src/js/jquery.ui.statusbar.js"></script>
        <script type="text/javascript">
            $(function() {
                var initialHideAfter = 10;
                $("#statusbar-placeholder").statusbar();
                $("#statusbar-placeholder").statusbar("add", "initial message will be removed after " + initialHideAfter + " seconds");
                $("#add-message-button").bind("click", function() {
                    var chosenHideAfter = parseInt($("#nrofseconds").val(), 10);
                    var msg = new Date() + " will be removed after " + chosenHideAfter + " seconds";
                    $("#statusbar-placeholder").statusbar("add", msg, chosenHideAfter);
                    return false;
                }).button();
                // after loading the page, add some messages after random delays
                for (var i = 0; i < 20; i++) {
                    setTimeout(function() {
                        $("#statusbar-placeholder").statusbar("add", "this could be an application event reporting something");
                    }, Math.floor((Math.random() * 60) + 5) * 1000);
                }

                $("#statusbar-placeholder").bind("statusbarmessageadd", function(event, msg) {
                    if (window.console) {
                        console.log("added: " + msg);
                    }
                });

                // bind to message by type
                $("#statusbar-placeholder").bind("statusbarmessageremove", function(event, msg) {
                    if (window.console) {
                        console.log("removed: " + msg);
                    }
                });
            });
        </script>
        <style>
            body {
                font-family: verdana;
                font-size: 12px;
            }
            h1 {
                font-size: 1.3em;
            }
            h2 {
                font-size: 1.2em;
            }
            #background-text {
                position: fixed;
                bottom: 1em;
                z-index: -999;
            }
            form {
              background-color: white;
              border: 1px solid silver;
              margin: 1em;
              padding: 1em;
              with: 200px;
            }
        </style>
    </head>
    <body>

        <h1>jQuery UI Statusbar</h1>        

        <h2>Demonstration nr. 1</h2>
                       
            <form>
              <label for="nrofseconds">How many seconds to display the message?</label>
              <input id="nrofseconds" type="number" value="3" size="2" />
              <div>
                  <button id="add-message-button">add message to bar</button>
                  <div id="statusbar-placeholder">no text</div>
              </div>
            </form>    
         
        
        <p id="background-text">
            Some static content to provide a backdrop:
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Cras sit amet lorem tortor, eget consequat turpis.
            Aenean id rutrum risus. Curabitur et turpis lectus,
            vitae ullamcorper ligula. Quisque tincidunt auctor dapibus.
            In hac habitasse platea dictumst. Vivamus eu ornare sapien.
            Cum sociis natoque penatibus et magnis dis parturient montes,
            nascetur ridiculus mus. Morbi aliquet ligula ante, quis congue augue.
            Nullam velit metus, sodales ultrices adipiscing congue, luctus eget dui.
            Maecenas lacinia, ipsum sed sagittis tristique, diam quam malesuada erat,
            et scelerisque mi erat eu odio. Aenean ac lorem mauris.
            Suspendisse vitae mauris sed nulla vulputate viverra ut a odio.
            Pellentesque habitant morbi tristique senectus et netus et malesuada
            fames ac turpis egestas. Aenean dui orci, luctus eu rhoncus a, fringilla vel mauris.
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Cras sit amet lorem tortor, eget consequat turpis.
            Aenean id rutrum risus. Curabitur et turpis lectus,
            vitae ullamcorper ligula. Quisque tincidunt auctor dapibus.
            In hac habitasse platea dictumst. Vivamus eu ornare sapien.
            Cum sociis natoque penatibus et magnis dis parturient montes,
            nascetur ridiculus mus. Morbi aliquet ligula ante, quis congue augue.
            Nullam velit metus, sodales ultrices adipiscing congue, luctus eget dui.
            Maecenas lacinia, ipsum sed sagittis tristique, diam quam malesuada erat,
            et scelerisque mi erat eu odio. Aenean ac lorem mauris. Suspendisse vitae
            mauris sed nulla vulputate viverra ut a odio. Pellentesque habitant morbi
            tristique senectus et netus et malesuada fames ac turpis egestas.
            Aenean dui orci, luctus eu rhoncus a, fringilla vel mauris.
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Cras sit amet lorem tortor, eget consequat turpis.
            Aenean id rutrum risus. Curabitur et turpis lectus,
            vitae ullamcorper ligula. Quisque tincidunt auctor dapibus.
            In hac habitasse platea dictumst. Vivamus eu ornare sapien.
            Cum sociis natoque penatibus et magnis dis parturient montes,
            nascetur ridiculus mus. Morbi aliquet ligula ante, quis congue augue.
            Nullam velit metus, sodales ultrices adipiscing congue, luctus eget dui.
            Maecenas lacinia, ipsum sed sagittis tristique, diam quam malesuada erat,
            et scelerisque mi erat eu odio. Aenean ac lorem mauris. Suspendisse vitae
            mauris sed nulla vulputate viverra ut a odio. Pellentesque habitant morbi
            tristique senectus et netus et malesuada fames ac turpis egestas.
            Aenean dui orci, luctus eu rhoncus a, fringilla vel mauris.
        </p>

    </body>
</html>
